<?php
include 'header.php';
?>

<style>
    /* 大标题样式 - 添加蓝色标记 */
    .panel-title {
        padding-left: 16px;
        position: relative;
    }

    .panel-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: var(--primary-blue);
        border-radius: 2px;
    }

    /* 表单样式 */
    .form-section {
        margin-bottom: 32px;
    }

    .form-section:last-child {
        margin-bottom: 0;
    }

    .form-section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 20px 0;
        padding-bottom: 12px;
        padding-left: 16px;
        border-bottom: 2px solid var(--gray-200);
        position: relative;
        line-height: 1.4;
    }

    .form-section-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 12px;
        margin: auto 0;
        width: 4px;
        height: 16px;
        background: var(--primary-blue);
        border-radius: 2px;
    }

    .form-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
    }

    @media (min-width: 768px) {
        .form-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-label {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--gray-700);
        margin-bottom: 8px;
        display: block;
    }

    .form-input,
    .form-textarea {
        padding: 12px 16px;
        border: 1px solid var(--gray-300);
        border-radius: var(--border-radius);
        font-size: 0.95rem;
        transition: all 0.2s ease;
        background: var(--white);
    }

    .form-input:focus,
    .form-textarea:focus {
        outline: none;
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .form-textarea {
        min-height: 100px;
        resize: vertical;
        font-family: inherit;
    }

    .form-help {
        color: var(--gray-500);
        font-size: 0.85rem;
        margin-top: 4px;
    }

    /* 按钮样式 */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        border: none;
        border-radius: var(--border-radius);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        justify-content: center;
    }

    .btn-primary {
        background: var(--primary-blue);
        color: var(--white);
    }

    .btn-primary:hover {
        background: var(--primary-blue-dark);
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }

    .btn-secondary {
        background: var(--gray-200);
        color: var(--gray-700);
    }

    .btn-secondary:hover {
        background: var(--gray-300);
        color: var(--gray-800);
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--gray-200);
    }

    /* 移动端优化 */
    @media (max-width: 768px) {
        .form-actions {
            flex-direction: column-reverse;
        }

        .btn {
            width: 100%;
        }
    }
</style>

<!-- 页面内容 -->
<div class="panel">
    <div class="panel-header">
        <h2 class="panel-title">网站设置</h2>
        <p class="panel-subtitle">配置您的网站基本信息和安全设置</p>
    </div>
    <div class="panel-content">
        <form id="site-config-form">
            <div class="form-section">
                <h3 class="form-section-title">基本信息</h3>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="site_title">网站标题</label>
                        <input type="text" id="site_title" name="site_title" class="form-input"
                            value="<?php echo htmlspecialchars($conf['title'] ?? ''); ?>" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="site_icp">备案号</label>
                        <input type="text" id="site_icp" name="site_icp" class="form-input"
                            value="<?php echo htmlspecialchars($conf['icp'] ?? ''); ?>"
                            placeholder="例如：豫ICP备2025123974号">
                        <small class="form-help">网站底部显示的备案信息</small>
                    </div>
                    <div class="form-group full-width">
                        <label class="form-label" for="site_docs">网站描述</label>
                        <textarea id="site_docs" name="site_docs" class="form-textarea"
                            placeholder="简要描述您的网站..."><?php echo htmlspecialchars($conf['docs'] ?? ''); ?></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="site_email">联系邮箱</label>
                        <input type="email" id="site_email" name="site_email" class="form-input"
                            value="<?php echo htmlspecialchars($conf['email'] ?? ''); ?>"
                            placeholder="例如：admin@example.com">
                        <small class="form-help">网站底部显示的联系邮箱</small>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="form-section-title">背景设置</h3>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="bg_pc_url">PC端背景图片地址</label>
                        <input type="url" id="bg_pc_url" name="bg_pc_url" class="form-input"
                            value="<?php echo htmlspecialchars($conf['bg_pc_url'] ?? 'https://lh.ithxs.com/apis.php?act=pc'); ?>"
                            placeholder="请输入PC端背景图片URL">
                        <small class="form-help">留空则使用默认随机背景图片</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="bg_mobile_url">手机端背景图片地址</label>
                        <input type="url" id="bg_mobile_url" name="bg_mobile_url" class="form-input"
                            value="<?php echo htmlspecialchars($conf['bg_mobile_url'] ?? 'https://lh.ithxs.com/apis.php?act=pe'); ?>"
                            placeholder="请输入手机端背景图片URL">
                        <small class="form-help">留空则使用默认随机背景图片</small>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="form-section-title">布局设置</h3>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="pc_columns">PC端展示列数</label>
                        <input type="number" id="pc_columns" name="pc_columns" class="form-input"
                            value="<?php echo htmlspecialchars($conf['pc_columns'] ?? '5'); ?>"
                            min="3" max="8" required>
                        <small class="form-help">PC端每行显示的卡片数量（最小3列，最大8列）</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="mobile_columns">手机端展示列数</label>
                        <input type="number" id="mobile_columns" name="mobile_columns" class="form-input"
                            value="<?php echo htmlspecialchars($conf['mobile_columns'] ?? '2'); ?>"
                            min="1" max="3" required>
                        <small class="form-help">手机端每行显示的卡片数量（最小1列，最大3列）</small>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="form-section-title">网站信息</h3>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="site_start_time">建站时间</label>
                        <input type="datetime-local" id="site_start_time" name="site_start_time" class="form-input"
                            value="<?php echo date('Y-m-d\TH:i', strtotime($conf['site_start_time'] ?? '2024-01-01 00:00:00')); ?>"
                            required>
                        <small class="form-help">网站底部将显示网站运行天数的动态计时</small>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <h3 class="form-section-title">安全设置</h3>
                <div class="form-grid">
                    <div class="form-group">
                        <label class="form-label" for="site_token">新管理密钥</label>
                        <input type="password" id="site_token" name="site_token" class="form-input"
                            placeholder="留空则不修改密钥">
                        <small class="form-help">如果修改密钥，您需要重新登录</small>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="resetForm()">
                    <i class="fas fa-undo"></i>
                    重置
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i>
                    保存设置
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // 表单提交处理
    document.getElementById('site-config-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        // 显示加载状态
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 保存中...';
        submitBtn.disabled = true;
        
        fetch('api.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                action: 'updateSiteConfig',
                site_title: formData.get('site_title'),
                site_docs: formData.get('site_docs'),
                site_icp: formData.get('site_icp'),
                site_email: formData.get('site_email'),
                bg_pc_url: formData.get('bg_pc_url'),
                bg_mobile_url: formData.get('bg_mobile_url'),
                pc_columns: formData.get('pc_columns'),
                mobile_columns: formData.get('mobile_columns'),
                site_start_time: formData.get('site_start_time'),
                site_token: formData.get('site_token')
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                AntMessage.success(data.message || '设置保存成功');
                
                // 如果修改了密钥，提示重新登录
                if (formData.get('site_token')) {
                    setTimeout(() => {
                        if (confirm('密钥已修改，需要重新登录。是否立即跳转到登录页面？')) {
                            window.location.href = 'index.php?action=logout';
                        }
                    }, 1500);
                }
            } else {
                AntMessage.error(data.message || '保存失败，请重试');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            AntMessage.error('网络错误，请检查连接后重试');
        })
        .finally(() => {
            // 恢复按钮状态
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });
    
    // 重置表单
    function resetForm() {
        if (confirm('确定要重置所有设置吗？')) {
            document.getElementById('site-config-form').reset();
            AntMessage.info('表单已重置');
        }
    }
</script>

<?php include 'footer.php'; ?>
